<template>
  <div class="nav-footer">
    <router-link to="/home" class="nav-item">
      <span>首页</span>
    </router-link>
    <router-link to="/hot" class="nav-item">
      <span>热门</span>
    </router-link>
    <div class="nav-item add-button">
      <button @click="triggerFileSelect" class="add-icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiahao"></use>
        </svg>
      </button>
    </div>
    <router-link to="/news" class="nav-item">
      <span>消息</span>
    </router-link>
    <router-link to="/me" class="nav-item">
      <span>我</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'NavFooter',
  methods: {
    triggerFileSelect() {
      this.$router.push('/publish');
    }
  }
}
</script>

<style scoped>
.nav-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  z-index: 999;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7d7d7d;
  text-decoration: none;
  font-size: 30px;
  width: 20%;
  text-align: center;
  font-weight: bold;
}

.nav-item span {
  margin-top: 6px;
  font-size: 30px;
  font-weight: bold;
}

.add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.add-icon {
  width: 96px;
  height: 76px;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.router-link-active {
  color: #000;
  font-weight: bold;
}



.add-icon .icon {
  width: 66px;
  height: 66px;
  color: #fff;
}
</style>